<template>
  <a-modal
    width="550px"
    :bodyStyle="{ height: '150px', overflow: 'auto' }"
    :title="title"
    :visible="isModal"
    @cancel="handleCancel"
  >
    <a-form-model ref="archiveDocModifyRef" :rules="rules" style="width: 100%" labelAlign="left" :model="infoForm">
      <a-col :xxl="24" :lg="24" :sm="24">
        <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" 
          :label="isRoot ? '分卷名称': '类别名称'" prop="treeNodeName">
          <a-input v-model="infoForm.treeNodeName" allow-clear :maxLength="50" placeholder="请输入名称" />
        </a-form-model-item>
      </a-col>
    </a-form-model>
    <template slot="footer">
      <div style="display: flex; justify-content: center">
        <a-button class="m-r-8" icon="rollback" @click="handleCancel">返回</a-button>
        <a-button class="m-r-8" type="primary" @click="onSubmit" :loading="loading">
          {{ isModify ? '修改' : '新增' }}
        </a-button>
      </div>
    </template>
  </a-modal>
</template>

<script>
import { addTreeNode, addRootTreeNode, updateTreeNodeName } from '@/api/archive/apl_archive'
import { Tp_dostypeValue } from '@/enumeration/Tp_dostype.js'
export default {
  data() {
    return {
      labelCol: { span: 8 }, // label宽
      wrapperCol: { span: 12 }, // 组件宽
      loading: false, //按钮显示
      isModal: false, //模态框显示
      isModify: false, // 是否是修改
      isRoot: false, //是否是根节点
      title: '',
      Tp_dostype: Tp_dostypeValue,
      infoForm: {
        applyid: '',
        parentId: '',
        treeNodeType: undefined,
        treeNodeId: '',
        treeNodeName: ''
      },
      rules: {
        treeNodeName: [
          { required: true, message: '请输入名称', trigger: 'change' },
          { max: 50, message: '长度不能超过50', trigger: 'blur' }
        ]
      }
    }
  },
  created() {},
  methods: {
    init(formObj) {
      this.isModal = true
      this.isModify = formObj.isModify
      this.isRoot = formObj.isRoot
      this.infoForm.parentId = formObj.parentId
      this.infoForm.treeNodeType = formObj.treeNodeType
      this.infoForm.treeNodeId = formObj.treeNodeId
      this.infoForm.treeNodeName = formObj.treeNodeName
      this.infoForm.applyid = formObj.applyid
      let temTitle = this.isRoot ? '分卷' :  '类别'
      this.title =  (this.isModify ? '修改' : '新增') + temTitle
    },
    onSubmit() {
      let _this = this
      this.$refs.archiveDocModifyRef.validate(valid => {
        _this.loading = true
        if (valid) {
          if (this.isModify) {
            // 编辑
            this.updateTreeNodeName()
          } else {
            if (this.infoForm.treeNodeType == this.Tp_dostype.VOLUME) {
              this.addRootTreeNode()
            } else {
              this.addTreeNode()
            }
          }
        } else {
          this.loading = false
        }
      })
    },
    // 新增节点
    addTreeNode() {
      addTreeNode({
        treeNodeType: this.infoForm.treeNodeType,
        treeNodeName: this.infoForm.treeNodeName,
        parentId: this.infoForm.parentId
      }).then(res => {
        this.loading = false
        if (res.code !== 0) {
          this.$message.error(res.msg)
        } else {
          this.$message.success('新增成功')
          this.$emit('saveNodeCallback',res.data, false)
          this.handleCancel()
        }
      })
    },
    addRootTreeNode() {
      addRootTreeNode({
        treeNodeName: this.infoForm.treeNodeName,
        applyid: this.infoForm.applyid,
        parentId: this.infoForm.parentId
      }).then(res => {
        this.loading = false
        if (res.code !== 0) {
          this.$message.error(res.msg)
        } else {
          this.$message.success('新增成功')
          this.$emit('saveNodeCallback',res.data, true)
          this.handleCancel()
        }
      })
    },

    // 修改节点名称
    updateTreeNodeName() {
      updateTreeNodeName({ treeNodeId: this.infoForm.treeNodeId, treeNodeName: this.infoForm.treeNodeName }).then(
        res => {
          this.loading = false
          if (res.code !== 0) {
            this.$message.error(res.msg)
          } else {
            this.$message.success('修改成功')
            this.$emit('modifyNodeCallback',res.data)
            this.handleCancel()
          }
        }
      )
    },
    handleCancel() {
      this.$refs.archiveDocModifyRef.resetFields()
      this.isModal = false
    }
  }
}
</script>

<style>
</style>